<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>proxy-model</title>
	</head>
	<body>
		<div class="div1">
			<a href="#">a1</a>
			<a href="#">a2</a>
			<a href="#">a3</a>
			<a href="#">a4</a>
			<a href="#">a5</a>
		</div>
		<div id="div2" style="width: 500px;height: 20px;background-color: blue;">div2</div>
		
		<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.0/jquery.js"></script>
		<script type="text/javascript">
			// 启动步骤:
			//	1.打开当前目录
			//	2.http-server -p 8881
			//	3.localhost:8881/proxy-model.html
			
			// 迭代器模式
			// 顺序遍历有序集合
			// 使用者不必知道集合内部的结构
			var arr = [1, 2, 3];
			var nodeList = document.getElementsByTagName('a');
			var $a = $('a');
			
			function each(data) {
				var $data = $(data); // 生成迭代器
				$data.each(function(key, value) {
					console.log(key, value)
				})
			}
			each(arr);
			each(nodeList);
			each($a);
			
			// forEach 是数组的方法,只能用于遍历数组
			arr.forEach(function(item) { 
				console.log(item)
			})
			
			// nodeList 是一个类数组,并不是真正的数组
			var i, length = nodeList.length;
			for(i = 0; i < length; i++) {
				console.log(NodeList[i])
			}
			
			// 遍历$a
			$a.each(function(key, ele) {
				console.log(key, ele)
			})
			
		</script>
	</body>
</html>